<!--
 * @Date: 2023-03-27 11:07:05
 * @LastEditTime: 2023-04-20 13:15:44
 * @FilePath: /nlk/src/views/KLine/KLine.vue
 * 介绍:NLK数据监控
-->
<script lang="ts" setup>
import lineCharts from "./components/lineCharts.vue";
import countInfo from "./components/countInfo.vue";
import { apiNlkLineCharts, NlkLineCharts } from "@@/api/page/KLine";

import useBalanceStore from "@@/store/useBalanceStore";

const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);

/**nlk数据 */
const data = reactive<{
  [k: string]: NlkLineCharts.Res;
}>({});
/**获取nlk数据 */
async function getLineChartsData(coinId: StrNumber) {
  const res = await apiNlkLineCharts({ coin_id: coinId });
  if (!res) return;
  data[coinId] = res;
}
const tabsCoin = computed(() =>
  Object.values(coinEnum.value).filter((v) =>
    ["NLK", "NLKS"].includes(v?.code || "")
  )
);
</script>

<template>
  <CpageView class="KLine">
    <Rnavbar left-arrow bg="none" color="var(--C-T5)">
      <span>NLK</span>{{ $t("shu-ju-jian-kong") }}
    </Rnavbar>
    <Rtabs @rendered="(e) => getLineChartsData(e)">
      <VanTab v-for="coin in tabsCoin" :title="coin?.code" :name="coin?.id">
        <div class="auto-MT-lg">
          <countInfo :coin="coin!" :nlk-data="data[coin!.id]" />
          <lineCharts :kline="data[coin!.id]?.kline" />
        </div>
      </VanTab>
    </Rtabs>
  </CpageView>
</template>

<style lang="less" scoped>
.countCard {
  width: 100%;
}
.coinInfo {
  border-radius: 0;
  .Ctag {
    border-radius: 0;
    background-color: var(--C-success);
    font-size: var(--T-S-xs);
  }
  .coinInfo_content {
    .Cgrid {
      flex: 1;
    }
  }
}
.CpageView {
  background-color: var(--C-B5);
  color: var(--C-T5);
}
</style>
<style lang="less">
.KLine {
  .van-tab--active {
    color: var(--C-B1);
  }
}
</style>
